<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        :root {
            --fontColor: #d82019;
            --main_color: #b8a1a1;
        }

        /*  这种清除浮动的方式是最为推荐的, 用的人也是最多,  不推荐 overflow ：hidden , 父元素不能使用定位    */
        .clearfix::after {
            content: '';
            display: table;
            clear: both;
        }

        .wfull {
            width: 100%;
        }

        .hfull {
            height: 100%;
        }

        .obc {
            object-fit: cover;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .file_describe {
            padding: 12px;
            border: none;
            border: 5px solid rgb(58, 12, 198);
            width: 100%;
            font-size: 36px;
            font-family: Consolas;
        }

        .submit-btn:hover {
            background: #383535;
            color: antiquewhite;
            cursor: pointer;
        }

        .submit-btn {
            padding: 18px;
            font-weight: 900;
            border: 3px solid black;
            position: fixed;
            right: 30px;
            top: 50px;
        }

        textarea {
            width: 100%;
            height: 888px;
            border: 5px solid rgb(77, 39, 215);
            font-weight: bolder;
            font-family: Consolas !important;
            padding: 16px !important;
            color: #000;
            font-size: 28px !important;
        }
    </style>
</head>

<body> <br><br><br><br><br>
    <div style="padding: 22px;">
        <div id="result"></div>
        <h1> add.html </h1>
        <!-- <a href="javascript:window.opener=null;window.open('','_self');window.close();">关闭</a> -->
        <input id="file_describe" type="text" class="file_describe" placeholder="describe">
        <button class="submit-btn " onclick="new_html_file()">提交</button> <br><br>
        <textarea name="" id="file_content"></textarea>
    </div>




</body>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js" type="application/javascript"></script>
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/layui/2.6.4/css/layui.min.css" type="text/css" rel="stylesheet" />
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/layui/2.6.4/layui.min.js" type="application/javascript"></script>

<script>
    function new_html_file(params) {
        var file_describe = document.getElementById("file_describe").value;
        var file_content = document.getElementById("file_content").value;
        if (file_describe.length < 3 || file_content.length < 3) {
            layer.msg("<h1> 不能为空  </h1>")
            return false;
        }

        $.ajax({
            type: "POST",
            url: "/new_html_file/",
            data: { "html_file_describe": file_describe, "html_file_content": file_content },
            datatype: "json",
            success: function (ret) {
                if (ret.return_text === "file_exist") {
                    layer.msg("<h1> file_exist </h1>")
                }
                if (ret.return_text === "new_file_success") {
                    layer.msg("<h1> new_file_success </h1>");
                    setTimeout(() => {
                        window.location.reload();
                    }, 1200);
                }
            },
            //调用出错执行的函数
            error: function () {
                //请求出错处理
            }
        })
    }
</script>

</html>